<template>
  <a-modal
    title="编辑表单"
    width="70%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="
      () => {
        this.visible = false
      }
    "
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="用户名" prop="UserName">
              <a-input v-model="entity.UserName" autocomplete="off" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="真实姓名" prop="RealName">
              <a-input v-model="entity.RealName" autocomplete="off" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="密码" prop="newPwd">
              <a-input v-model="entity.newPwd" type="password" autocomplete="off" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="确认密码" prop="password">
              <a-input v-model="password" type="password" autocomplete="off" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="性别" prop="Sex">
              <a-radio-group v-model="entity.Sex">
                <a-radio :value="0">女</a-radio>
                <a-radio :value="1">男</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="生日" prop="Birthday">
              <a-date-picker v-model="entity.Birthday" format="YYYY-MM-DD" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="角色"  prop="RoleIdList">
              <a-select @change="RoleChange" mode="multiple" v-model="entity.RoleIdList" allowClear>
                <a-select-option v-for="item in RoleOptionList" :key="item.Id">{{ item.RoleName }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="title" prop="brandId">
              <!-- 渠道/代理商 -->
              <a-select
                show-search
                v-if="OrgType == '1'"
                @change="AgentChange"
                v-model="entity.brandId"
                allowClear
                placeholder="请选择代理商"
              >
                <a-select-option v-for="(item, index) in AgentList" :key="index" :value="item.Id">
                  {{ item.AgentName }}
                </a-select-option>
              </a-select>
              <!-- 企业用户 -->
              <a-select
                allowClear
                v-else-if="OrgType == '2'"
                @change="MerchantChange"
                show-search
                v-model="entity.brandId"
                placeholder="请选择客户"
              >
                <a-select-option v-for="(item, index) in MerchantList" :key="index" :value="item.value">
                  {{ item.text }}
                </a-select-option>
              </a-select>
              <!-- 服务商 -->
              <a-select
                show-search
                v-else
                v-model="entity.brandId"
                @change="ServiceChange"
                allowClear
                placeholder="请选择服务商"
              >
                <a-select-option v-for="(item, index) in ServiceList" :key="index" :value="item.Id">
                  {{ item.ServiceName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="邮箱" prop="email">
              <a-input v-model="entity.email" autocomplete="off" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="联系电话" prop="telephone">
              <a-input v-model="entity.telephone" autocomplete="off" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import moment from 'moment'
export default {
  props: {
    afterSubmit: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      OrgType: '1',
      AgentList: [],
      title: '所属组织',
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 },
      },
      MerchantList: [],
      visible: false,
      password: '',
      confirmLoading: false,
      entity: {},
      DepartmentIdTreeData: [],
      RoleOptionList: [],
      ServiceList: [],
      rules: {
        UserName: [{ required: true, message: '必填' }],
        RealName: [{ required: true, message: '必填' }],
        Sex: [{ required: true, message: '必填' }],
      },
    }
  },
  methods: {
    async init() {
      this.GetRoleList()
      this.GetAgent()
      this.GetService()
      this.GetMerchant()
      this.visible = true
      this.entity = {}
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
      await this.$http.post('/Base_Manage/Base_Department/GetTreeDataList', {}).then((resJson) => {
        if (resJson.Success) {
          this.DepartmentIdTreeData = resJson.Data
        }
      })
      

    },
    async GetRoleList(){
      await this.$http.post('/Base_Manage/Base_Role/GetDataList', {}).then((resJson) => {
        if (resJson.Success) {
          console.log(resJson)
          this.RoleOptionList = resJson.Data
        }
      })
    },
    async GetAgent() {
      await this.$http.post('/Base_Manage/Home/GetAgent_Select').then((res) => {
        this.AgentList = res.Data
      })
    },
    GetService() {
      this.$http.post('/Base_Manage/Home/GetService_Select').then((res) => {
        this.ServiceList = res.Data
      })
    },
    async GetMerchant() {
      await this.$http.post('/Base_Manage/Home/GetMerchant_Select').then((res) => {
        this.MerchantList = res.Data
      })
    },
    openForm(id) {
      this.init()
      
      if (id) {
        this.$http.post('/Base_Manage/Base_User/GetTheData', { id: id }).then((resJson) => {
          this.entity = resJson.Data
          
          if (this.entity['Birthday']) {
            this.entity['Birthday'] = moment(this.entity['Birthday'])
          }
          this.OrgTypeChange(this.entity.RoleIdList[0])
        })
        
      }
      
    },
    handleSubmit() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        this.confirmLoading = true
        this.$http.post('/Base_Manage/Base_User/SaveData', this.entity).then((resJson) => {
          this.confirmLoading = false

          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.afterSubmit()
            this.visible = false
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    },
    RoleChange(value) {
      console.log(value)
      if(value.length>1){
        this.$message.warning('最多选择一条')
        this.entity.RoleIdList.splice(-1);
      }
      if (value[0] == undefined) {
        // this.$message.warning('请选择角色')
        return
      }
      let obj = {}
      obj = this.RoleOptionList.find((item) => {
        //这里的Data就是上面遍历的数据源
        return item.Id === value[0] //筛选出匹配数据
      })
      if (obj.roletype == '企业用户') {
        this.OrgType = '2'
      } else if (obj.roletype == '渠道用户') {
        this.OrgType = '1'
      } else {
        this.OrgType = '3'
      }
    },
    AgentChange(value) {
      let obj = {}
      obj = this.AgentList.find((item) => {
        //这里的Data就是上面遍历的数据源
        return item.Id === value //筛选出匹配数据
      })
      this.entity.brandName = obj.AgentName
    },
    MerchantChange(value) {
      let obj = {}
      obj = this.MerchantList.find((item) => {
        //这里的Data就是上面遍历的数据源
        return item.value === value //筛选出匹配数据
      })
      this.entity.brandName = obj.text
    },
    ServiceChange(value) {
      let obj = {}
      obj = this.ServiceList.find((item) => {
        //这里的Data就是上面遍历的数据源
        return item.Id === value //筛选出匹配数据
      })
      this.entity.brandName = obj.ServiceName
    },
    OrgTypeChange(value){
      let obj = {}
      obj = this.RoleOptionList.find((item) => {
        //这里的Data就是上面遍历的数据源
        return item.Id === value //筛选出匹配数据
      })
      console.log(this.RoleOptionList)
      console.log(obj)
      if (obj.roletype == '企业用户') {
        this.OrgType = '2'
      } else if (obj.roletype == '渠道用户') {
        this.OrgType = '1'
      } else {
        this.OrgType = '3'
      }
    }
  },
}
</script>
